<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>诛仙1</title>
        <style>
            div.ex{
                width: 220px;
                padding: 10px;
                border: 5px solid gray;
                margin: 0px;
            }
            p.none{
                border-style: none;
            }
            p.dotted{
                border-style: dotted;
            }
            p.dashed{
                border-style: dashed;
            }
            p.solid{
                border-style: solid;
            }
            p.double{
                border-style: double;
            }
            p.groove{
                border-style: groove;
            }
            p.ridge{
                border-style: ridge;
            }
            p.inset{
                border-style: inset;
            }
            p.outset{
                border-style: outset;
            }
            p.hidden{
                border-style: hidden;
            }
            p.mix{
                border-style: dotted dashed solid double;
            }
        </style>
    </head>
    <body>
        <img src="/imgs/250.png" alt="404" width="250" height="250">
        <div class="ex">上面的图片是250 px宽。
            这个元素的总宽度也是250 px。
        </div>
        <p class="none">无边框</p>
        <p class="dotted">虚线边框</p>
        <p class="dashed">虚线边框</p>
        <p class="solid">实线边框</p>
        <p class="double">双边框</p>
        <p class="groove">凹槽边框</p>
        <p class="ridge">垄状边框</p>
        <p class="inset">嵌入边框</p>
        <p class="outset">外凸边框</p>
        <p class="hidden">隐藏边框</p>
        <p class="mix">混合边框</p>
            
    </body>
</html>